<div class="alert alert-danger alert-dismissible" role="alert"
     ng-controller="ErrorAlertController"
     ng-repeat="error in common.errors">

  <button type="button" class="close" ng-click="removeAlert(common.errors, $index)">
    <span aria-hidden="true">&times;</span>
    <span class="sr-only">Close</span>
  </button>

  <span ng-if="error && error.RemoteException">
    {{error.RemoteException.localizedMessage}}
  </span>

  <a href="#"
     ng-if="error && error.RemoteException && error.RemoteException.stackTrace"
     ng-click="showStackTrace(error)">
    ( <span translate="home.graphPane.viewStackTrace">View Stack Trace</span>... )
  </a>

  <div class="alert-validation-errors" ng-if="error && error.pipelineIssues">
    <span>{{'global.messages.validate.validationFailed' | translate}}: </span>
    <div class="btn-group">
      <button class="btn btn-link dropdown-toggle" type="button"
              data-toggle="dropdown">
        <span ng-bind="error.issueCount"></span>
        <span>{{'global.messages.validate.validationErrors' | translate}}</span>
      </button>
      <ul class="dropdown-menu pull-left scrollable-menu" role="menu" aria-labelledby="dropdownMenu1">

        <li role="presentation" class="dropdown-header"
            translate="home.header.pipelineIssues"
            ng-repeat-start="issue in error.pipelineIssues">
          Pipeline Issues
        </li>
        <li role="presentation">
          <a role="menuitem" tabindex="-1" href="#"
             ng-click="onIssueClick(issue)">{{issue.message}}</a>
        </li>
        <li ng-repeat-end role="presentation" class="divider" ng-if="!$last"></li>

        <li role="presentation" class="dropdown-header"
            ng-repeat-start="(instanceName, issues) in error.stageIssues"
            ng-bind="getStageInstanceLabel(instanceName)">
        </li>
        <li role="presentation" ng-repeat="issue in issues">
          <a role="menuitem" tabindex="-1" href="#"
             ng-click="onIssueClick(issue, instanceName)"
             ng-bind="getIssuesMessage(instanceName, issue)"></a>
        </li>
        <li ng-repeat-end role="presentation" class="divider" ng-if="!$last"></li>

      </ul>
    </div>
  </div>

  <span ng-if="error && !error.RemoteException && !error.pipelineIssues">
    {{error}}
  </span>

</div>